<template>
	<el-dialog width="500px" title="订单发货" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<div class="warn-box" style="padding:10px">
			<svg-icon style="margin-right:10px" icon-class="warn" :size="20" />
			<p style="color:#000000;line-height:23px">发货凭证图片可做法律依据，添加后不可进行删除，请谨慎操作。点击查看<a
					href="https://image-xxz.oss-cn-beijing.aliyuncs.com/download/%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9.doc"
					class="blue-font">注意事项</a></p>
		</div>
		<div style="margin:0 auto 10px;display: block;width: 50%;">
		      <el-button size="small" type="primary" @click="downloadWord(form.orderId)">点击下载<租赁设备本人签收凭证></el-button>
		    </div>
		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
			<el-form-item label="订单编号">
				<el-input v-model="form.orderId" disabled></el-input>
			</el-form-item>
			<el-form-item label="发货类型" prop="delivery_type">
				<el-radio-group v-model="form.delivery_type" @change="handleTypeChange">
					<el-radio :label="1">物流发货</el-radio>
					<el-radio :label="2">上门自取</el-radio>
					<el-radio :label="3">上门安装</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="form.delivery_type==1" label="物流公司" prop="logistics_name">
				<el-select v-model="form.logistics_name" placeholder="请选择">
					<el-option v-for="(item, index) in logisticsNames" :key="index" :label="item" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-if="form.delivery_type==1" label="物流单号" prop="logistics_no">
				<el-input v-model="form.logistics_no" clearable @input="val=>changeInput(val)">
				</el-input>
			</el-form-item>
			<el-form-item label="发货凭证" prop="images">
				<crop-upload ref="cropUpload" :multiple="true" show-type="photo" :init-val="form.images"
					wrapper-width="100px" wrapper-height="100px" :photo-width="100" :photo-height="100"
					@setVal="imgChange"></crop-upload>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		deliverGoods,
		getLogisticAll, downloadWord
	} from "@/api/order";
	import cropUpload from "@/components/cropUpload";
	export default {
		components: {
			cropUpload
		},
		props: ['orderId'],
		data() {
			return {
				form: {
					orderId: "",
					delivery_type: 1,
					logistics_name: '',
					logistics_no: '',
					images: [],
					
				},
				rules: {
					delivery_type: [{
						required: true,
						message: '请选择发货类型',
						trigger: 'change'
					}],
					logistics_name: [{
						required: true,
						message: '请选择物流公司',
						trigger: 'change'
					}],
					logistics_no: [{
						required: true,
						message: '物流单号不能为空',
						trigger: 'blur'
					}],
					images: [{
						required: true,
						message: '请上传发货凭证',
						trigger: 'change'
					}]
				},
				dialogVisible: false,
				logisticsNames: [],
				params: {
				        orderId: '',
				      },
			}
		},
		created(){
			console.log("this.orderid",this.orderId)
		},
		methods: {
			// 下载回执单
			downloadWord(orderId) {
			  this.params.orderId = orderId;
			  downloadWord(this.params).then(res => {
				this.$message({
				  message: res[0],
				  type: 'success'
				})
			  })
			},
			changeInput(value) {
				const pattern = /^[0-9a-zA-Z]*$/g;
				if (!pattern.test(value)) {
					// input 框绑定的内容为空
					this.form.logistics_no = ''
				}
			},
			imgChange(val, type) {
				if (type === 'del') {
					this.form.images.splice(val, 1);
				} else {
					this.form.images.push(val);
				}
				this.$refs.cropUpload.sortList = this.form.images;
			},
			handleTypeChange(val) {
				if (val != 1) {
					this.form.logistics_name = '';
					this.form.logistics_no = '';
					this.form.images = [];
				}
			},
			submit() {
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						const params = {
							...this.form
						};
						params.images = params.images.join(',');
						deliverGoods(params).then(res => {
							this.dialogVisible = false;
							this.$emit('getList', true);
						})
					} else {
						this.$message({
							message: "请检查表单错误",
							type: "error"
						});
						return false;
					}
				});
			},
			getSelect() {
				getLogisticAll().then(res => {
					this.logisticsNames = res || [];
				})
			}
		},
		watch: {
			
			dialogVisible(val) {
				
				if (val) {
					this.form = {
						orderId: this.orderId,
						delivery_type: 1,
						logistics_name: '',
						logistics_no: '',
						images: []
					}
					this.getSelect();
				} else {
					this.$refs['ruleForm'].resetFields();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	a,
	a:focus,
	a:hover {
		color: $mainBlue;
	}
</style>
